import { Routes, Route } from 'react-router-dom';
import { usePortfolio } from './context/PortfolioContext';
import Gallery from './pages/Gallery';
import Admin from './pages/Admin';
import Courses from './pages/Courses';
import SearchBar from './components/SearchBar';

// 简单的导航栏组件
const Navbar = () => {
  const { isAdmin, handleAdminLogout } = usePortfolio();
  
  return (
    <nav className="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
      <div className="container mx-auto flex justify-between items-center">
        <h1 className="text-2xl font-bold text-blue-600 dark:text-blue-400">
        作品展示系统
        </h1>
        
        <div className="flex items-center gap-4">
          {/* 搜索框 */}
          <SearchBar />
          
          {/* 导航链接 */}
          <a href="/" className="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            课程列表
          </a>
          
          {isAdmin ? (
            <>
              <a href="/admin" className="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                管理员
              </a>
              <button 
                onClick={handleAdminLogout}
                className="px-3 py-2 text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
              >
                退出
              </button>
            </>
          ) : (
            <a href="/admin" className="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              管理员登录
            </a>
          )}
        </div>
      </div>
    </nav>
  );
};

// 主应用组件
function App() {
  return (
    <div className="min-h-screen flex flex-col">
      {/* 导航栏 */}
      <Navbar />
      
      {/* 主内容区 */}
      <main className="flex-grow container mx-auto p-4 md:p-6">
        <Routes>
          {/* 课程列表页（首页） */}
          <Route path="/" element={<Courses />} />
          
          {/* 作品展示页 */}
          <Route path="/works" element={<Gallery />} />
          
          {/* 管理员页面 */}
          <Route path="/admin" element={<Admin />} />
        </Routes>
      </main>
      
      {/* 页脚 */}
      <footer className="bg-white dark:bg-gray-800 py-4 px-6 shadow-inner">
        <div className="container mx-auto text-center text-gray-600 dark:text-gray-400">
          © {new Date().getFullYear()} 池州学院大数据与人工智能学院 - 版权所有
        </div>
      </footer>
    </div>
  );
}

export default App;
